<?php if(!defined('IN_FIRADIO')) {header('HTTP/1.1 403 Forbidden');exit('<h1>Access Denied</h1>');}?>
<?php $GLOBALS['script'][] = function() {?><script>
vue.data.disabled = 0;
vue.data.apidata = {};
vue.data.display_field = {};
vue.data.display_field.user_id = true;
vue.data.display_field.username = true;
vue.data.display_field.vps_wanipv4 = false;
vue.data.display_field.amount = true;
vue.data.display_field.state = true;
vue.data.flag = 'flag-list';
vue.data.choice_bill = {};
vue.data.choice_ntuser = {};
vue.data.choice_ntbalance = {};
vue.data.form.user_id = null;
const search = {};
search.username = {"title":"用户名","placeholder":"请输入用户名"};
vue.data.form.search = search;
function intval(i) {
    var i = parseInt(i, 10);
    if (isNaN(i)) i = 0;
    return i;
}
vue.methods.getApidata = function () {
    const that = this;
    that.disabled++;
    const form = window.clone(vue.data.form);
    this.ApiPost('/panel/yun/nthost/bill.php', form).then(function (data) {
        vue.data.apidata = data.data;
        vue.data.form.user_id = vue.data.apidata.rows_ntuser[0]['id'];
        that.flag='flag-list';
    }, function (data) {
        console.log('reject:', data);
    }).catch(function (reason) {
        console.log('catch:', reason);
    }).then(function() {
        that.disabled--;
    });
};
vue.methods.submit = function () {
    const that = this;
    that.disabled++;
    const form = window.clone(vue.data.form);
    this.ApiPost('/panel/yun/nthost/billpay.php', form).then(function (data) {
        vue.methods.getApidata();
    }, function (data) {
        console.log('reject:', data);
    }).catch(function (reason) {
        console.log('catch:', reason);
    }).then(function() {
        that.disabled--;
    });
};
vue.methods.format_amount = function (amount) {
    return Math.round(amount);
};
vue.methods.point_to_yuan = function (cpuseconds) {
    return (Math.floor(cpuseconds) / 10000) + '元';
};
vue.methods.toTop = function() {
    top.document.documentElement.scrollTop = 0;
    top.document.getElementById('iframe_content').height = 0;

};
vue.methods.getRowByRowsId = window.getRowByRowsId;
vue.mounted = function () {
    vue.methods.getApidata();
};
vue.computed = {};
vue.computed.rows_ntbalance2 = function () {
    if (!vue.hasOwnProperty('data')) return [];
    if (!vue.data.hasOwnProperty('apidata')) return [];
    if (!vue.data.apidata.hasOwnProperty('rows_ntbalance')) return [];
    const rows = [];
    const len = vue.data.apidata.rows_ntbalance.length;
    for (var i = 0; i < len; i++) {
        const row = vue.data.apidata.rows_ntbalance[i];
        if (row.user_id != vue.data.form.user_id) {
            continue;
        }
        if (row.balance <= 0) {
            continue;
        }
        rows.push(row);
    }
    if (rows.length > 0) {
        vue.data.form.balance_id = rows[0].id;
        vue.data.choice_ntbalance = rows[0];
    }
    return rows;
};
</script><?php }?>

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6" v-if="flag==='flag-list'">
        <div v-if="apidata.rows_bill" class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">搜索主机账单</h3>
                <div class="pull-right">
                    <button class="btn btn-primary btn-xs" type="button" v-on:click="flag='flag-search';toTop()">搜索账单</button>
                </div>
            </div>
            <div style="padding-left: 20px;">
                显示列：
                <label><input v-model="display_field.user_id" type="checkbox" />账单ID</label>
                <label><input v-model="display_field.hvu_id" type="checkbox" />HVU</label>
                <label><input v-model="display_field.username" type="checkbox" />用户名</label>
                <label><input v-model="display_field.vps_wanipv4" type="checkbox" />公网IP地址</label>
                <label><input v-model="display_field.amount" type="checkbox" />账单金额</label>
                <label><input v-model="display_field.state" type="checkbox" />状态</label>
            </div>
            <div v-if="apidata.rows_bill.length>0">
                <table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
                    <thead>
                        <tr role="row">
                            <th v-if="display_field.user_id">账单ID</th>
                            <th v-if="display_field.hvu_id">HVU</th>
                            <th v-if="display_field.username">用户名</th>
                            <th v-if="display_field.vps_wanipv4">公网IP地址</th>
                            <th v-if="display_field.amount">账单点数</th>
                            <th v-if="display_field.state">状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr role="row" class="odd" v-for="row in apidata.rows_bill">
                            <td v-if="display_field.user_id">{{row['id']}}</td>
                            <td v-if="display_field.hvu_id">{{row['hvu_id']}}</td>
                            <td v-if="display_field.username">{{row['username']}}</td>
                            <td v-if="display_field.vps_wanipv4">{{row['vps_wanipv4']}}</td>
                            <td v-if="display_field.amount">{{point_to_yuan(row['amount'])}}</td>
                            <td v-if="display_field.state">
                                <span v-if="row['settled']" style="color:green">已结算</span>
                                <span v-else style="color:red">未结算</span>
                            </td>
                            <td>
                                <button class="btn btn-primary btn-xs" type="button" v-on:click="flag='flag-info';form.nthost_bill_id=row['id'];choice_bill=row">详情</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-else>
                <center>
                    没有找到您的主机账单
                </center>
            </div>
        </div>
        <div v-else>
            <h2>数据载入中，请稍候...</h2>
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6" v-if="flag=='flag-info'">
        <div class="box box-info">
            <form v-on:submit="submit" onsubmit="return false" :disabled="disabled">
                <div class="box-header with-border">
                    <h3 class="box-title">账单详情 (账单ID:{{choice_bill['id']}})</h3>
                    <div class="pull-right">
                        <button class="btn btn-primary btn-xs" type="button" v-on:click="flag='flag-list';toTop()">返回列表</button>
                    </div>
                </div>
                <div class="box-body form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">计费HVU</label>
                        <div class="col-sm-9">
                            <div class="form-control">{{choice_bill['hvu_id']}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">计费用户名</label>
                        <div class="col-sm-9">
                            <div class="form-control">{{choice_bill['username']}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">公网IP地址</label>
                        <div class="col-sm-9">
                            <div class="form-control">{{choice_bill['vps_wanipv4']}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">计费周期开启</label>
                        <div class="col-sm-9">
                            <div class="form-control">{{choice_bill['uptime_begin']}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">计费周期结束</label>
                        <div class="col-sm-9">
                            <div class="form-control">{{choice_bill['uptime_end']}}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">主机计费点数</label>
                        <div class="col-sm-9">
                            <div class="form-control">计费{{choice_bill['uptime_seconds']}}秒 （单价:{{choice_bill['priceperday']}}点数每天）</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">账单点数</label>
                        <div class="col-sm-9">
                            <div class="form-control">账单金额:{{choice_bill['amount']}} 已支付:{{choice_bill['amount_paid']}}, 还剩:{{choice_bill['amount_remain']}}</div>
                        </div>
                    </div>
                    <div class="form-group" v-if="apidata.rows_ntuser&&apidata.rows_ntuser.length>0">
                        <label for="select_user_id" class="col-sm-3 control-label">选择远程账号</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="select_user_id" v-model="form.user_id" v-on:change="choice_ntuser=getRowByRowsId(apidata.rows_ntuser, form.user_id)">
                                <option v-for="(row) in apidata.rows_ntuser"
                                :value="row.id"
                                >
                                {{row['username']}} 可用点数:{{row['balance']}}
                                </option>
                            </select>
                            <div v-if="rows_ntbalance2.length==0&&form.user_id">
                                <span style="color:red">您选择的远程桌面账户里没有任何余额账户，请到【飞儿云平台】微信公众号充值</span>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <span style="color:red">请先添加【远程桌面账号】</span>
                    </div>
                    <div class="form-group" v-if="rows_ntbalance2.length>0">
                        <label for="select_balance_id" class="col-sm-3 control-label">选择付款账户</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="select_balance_id" v-model="form.balance_id" v-on:change="choice_ntbalance=getRowByRowsId(apidata.rows_ntbalance, form.balance_id)">
                                <option v-for="(row) in rows_ntbalance2"
                                :value="row.id"
                                >
                                {{row['acctype']}} 点数:{{row['balance']}}
                                </option>
                            </select>
                            <div>
                                <span style="color:blue">扣除{{(choice_bill['amount_remain'])}}后，剩余{{choice_ntbalance['balance']-choice_bill['amount_remain']}}</span>
                                <span style="color:red" v-if="choice_ntbalance['balance']*1<choice_bill['amount_remain']*1">余额不足</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-default btn-block btn-flat" v-on:click="flag='flag-list';toTop()">返回列表</button>
                    </div>
                    <div class="col-xs-6">
                        <button type="submit" class="btn btn-info btn-block btn-flat" :disabled="disabled>0">确定支付</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6" v-if="flag=='flag-search'">
        <div class="box box-info">
            <form class="form-horizontal" action="" method="post" v-on:submit="getApidata()" onsubmit="return false;">
                <div class="box-header with-border">
                    <h3 class="box-title">搜索主机账单</h3>
                    <div class="pull-right">
                        <button class="btn btn-primary btn-xs" type="button" v-on:click="flag='flag-list';toTop()">返回列表</button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group" v-for="(attr,name) in form.search">
                        <label for="qquin" class="col-sm-3 control-label">{{attr.title}}</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control"
                            :id="name"
                            v-model="attr.value"
                            :disabled="disabled>0"
                            :placeholder="attr.placeholder" />
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <div class="box-footer col-sm-6 col-xs-12">
                        <button type="submit" class="btn btn-info btn-block btn-flat" :disabled="disabled>0">查询账单</button>
                    </div>
                    <div class="box-footer col-sm-6 col-xs-12">
                        <button type="button" class="btn btn-default btn-block btn-flat" v-on:click="flag='flag-list';toTop()">返回列表</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
